var myApp = angular.module('app', []);

myApp.factory('mapService', function () { //shared data
    console.log('create mapService factory');
    return {
        points: []
    };
});
myApp.controller('Ctrl', function ($scope, mapService) {
    console.log('create Ctrl controller');
    $scope.mapService = mapService;
});
myApp.directive('myMap', function (mapService) {
    console.log('create myApp directive');
    return {
        restrict: 'EA',
        link: function($scope, $element, $attrs) {
            var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib });
            var map = L.map($attrs.id).setView([48.80081, 2.16429], 15).addLayer(osm);

            map.on('click', function (e) {
                console.log(mapService.points);
                L.marker(e.latlng)
                    .addTo(map)
                    .bindPopup(e.latlng.toString())
                    .openPopup();
                $scope.$apply(function () {
                    mapService.points.push(e.latlng);
                });
            });
        },
    };
});